<template>
	<page-meta>
		<navigation-bar title="商品收藏" background-color="#354e44" />
	</page-meta>
	<view class="collect">
		<view v-if="!collectedArr.length">
			暂无商品收藏
		</view>
		<view v-else >
			<view  @tap="goToProductDetail(item.id)" class="collect-goods" v-for="item in collectedArr" :key="item.id">
				<image class="collect-goods-img" :src="item.pic" ></image>
				<view class="collect-goods-right">
					<view class="collect-goods-right-title">{{item.name}}</view>
					<view class="collect-goods-right-collect">
						<view class="collect-goods-right-collect-desc">收藏</view>
						<view class="collect-goods-right-collect-price">¥ {{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectedArr:[]
			}
		},
		onLoad() {
			this.collectedArr=uni.getStorageSync('collectedArr')?uni.getStorageSync('collectedArr'):[];
		},
		methods: {
			goToProductDetail(id){
				uni.navigateTo({
					url:`../../productDetail/productDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.collect{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #f1ece7;
	box-sizing: border-box;
	padding: 30rpx;
	&-goods{
		display: flex;
		background-color: #FFFFFF;
		width: 100%;
		height: 220rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		border-radius: 15rpx;
		padding: 30rpx;
		&-img{
			display: block;
			width: 162rpx;
			flex: none;
			height: 162rpx;
			margin-right: 15rpx;
		}
		&-right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			&-title{
				width: 480rpx;
				// flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 30rpx;
			}
			&-collect{
				display: flex;
				font-size: 26rpx;
				justify-content: space-between;
				&-price{
					font-size: 40rpx;
					font-weight: 700;
					margin-right: 30rpx;
				}
			}
		}
	}
}
</style>
